<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList" :defaultPageSize="20">
			<template v-slot:top>
				<view class="tools">
					<uv-row gutter="20rpx">
						<uv-col span="3" @click="changeTab(1)">
							<view class="img">
								<image src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/6c0dc202508161058524962.png" mode="widthFix" class="w-full" />
							</view>
							<uv-text text="系统消息" :color="tabIndex1" size="28rpx" align="center" />
						</uv-col>
						<uv-col span="3" @click="changeTab(2)">
							<view class="img">
								<image src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/99dac202508161100075933.png" mode="widthFix" class="w-full" />
							</view>
							<uv-text text="商城消息" :color="tabIndex2" size="28rpx" align="center" />
						</uv-col>
						<uv-col span="3" @click="changeTab(3)">
							<view class="img">
								<image src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/c1d74202508161100322555.png" mode="widthFix" class="w-full" />
							</view>
							<uv-text text="进入聊天" :color="tabIndex3" size="28rpx" align="center" />
						</uv-col>
						<uv-col span="3" @click="changeTab(4)">
							<view class="img">
								<image src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/c44f9202508161100592049.png" mode="widthFix" class="w-full" />
							</view>
							<uv-text text="智能客服" :color="tabIndex4" size="28rpx" align="center" />
						</uv-col>
					</uv-row>
				</view>
			</template>

			<view v-for="(item,index) in dataList" :key="item.id" class="content" v-if="dataList">
				<view class="flex align-center justify-center" style="margin-top: 20rpx;">
					<uv-tags class="tags" :text="item.create_time" shape="circle" color="#fff" bgColor="#D6D6D6"
						borderColor="#D6D6D6" />
				</view>
				<view class="item">
					<view class="flex align-center">
						<image src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/0cf85202508161154153860.png" mode="widthFix" style="width: 40rpx;" />
						<uv-text :text="item.name" size="30upx" color="#333333" bold
							customStyle="margin-left: 10upx" />
					</view>
					<uv-text :text="item.describe" size="28rpx" color="#A5A5A5" customStyle="margin-top: 14rpx"
						:lines="2" />
				</view>
			</view>
		</z-paging>
		<custom-tab-bar />
	</view>
</template>


<script setup>
	import {
		onLoad,onShow
	} from '@dcloudio/uni-app'
	import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
	import CustomTabBar from '@/custom-tab-bar/index.vue'
	import {
		getSystemNotices
	} from '@/api'
	import {
		ref,
		reactive
	} from 'vue';


	

	onLoad((option) => {
		
	})
	
	onShow(()=> {
	
	})
	const selfIndex = ref(1)
	const color_activation = "#FFB90F"
	const color_default = "#848484"
	const tabIndex1 = ref(color_activation)
	const tabIndex2 = ref(color_default)
	const tabIndex3 = ref(color_default)
	const tabIndex4 = ref(color_default)
	const changeTab = (index) => {
		changeTabColor(index)
		selfIndex.value = index
		paging.value?.reload();

	}
	const changeTabColor = (index) => {
		switch (index) {
			case 1:
				tabIndex1.value = color_activation
				tabIndex2.value = color_default
				tabIndex3.value = color_default
				tabIndex4.value = color_default
				break;
			case 2:
				tabIndex1.value = color_default
				tabIndex2.value = color_activation
				tabIndex3.value = color_default
				tabIndex4.value = color_default
				break;
			case 3:
				tabIndex1.value = color_default
				tabIndex2.value = color_default
				tabIndex3.value = color_activation
				tabIndex4.value = color_default
				break;
			case 4:
				tabIndex1.value = color_default
				tabIndex2.value = color_default
				tabIndex3.value = color_default
				tabIndex4.value = color_activation
				break;
			default:
				tabIndex1.value = color_activation
				tabIndex2.value = color_default
				tabIndex3.value = color_default
				tabIndex4.value = color_default

		}

	}

	const paging = ref(null)
	const dataList = ref([])
	
	const queryList = (pageNo, pageSize) => {
		if(!token.value){
			paging.value.complete(false);
		}else{
			let param = {
			    page: pageNo,
				limit: pageSize,
				type : selfIndex.value
			}
			getSystemNotices(param).then(res => {
				paging.value.complete(res.result.data);
			}).catch(res => {
				paging.value.complete(false);
			})
		}
		
	}
</script>


<style>
	page {
		background-color: #F6F4F7;
		padding-bottom: 120upx; /* 给tabbar留出空间 */
	}
</style>

<style lang="scss" scoped>
	.tools {
		padding: 20rpx 0;
		background-color: #fff;

		.img {
			width: 50%;
			margin: 0 auto;
		}
	}

	.content {
		padding: 0 30rpx;
	}

	.tags {
		display: inline-flex;
	}

	.item {
		padding: 30rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}
</style>